<template>
  <el-container style="min-height: 100vh">
    <!-- 左侧 -->
    <left-component></left-component>
    <el-container style="flex-direction: column;">
      <!-- 头部 -->
      <header-component></header-component>
      <el-main>
        <!--下面这个div盒子是搜索框和搜索按钮 -->
        <!-- <div style="margin: 10px 0">
          <el-input style="width: 200px" placeholder="请输入名称" suffix-icon="el-icon-search"></el-input>
            <el-button class="ml-5" type="primary">搜索</el-button>
        </div> -->

        <!--  下面这个div盒子是新增、批量删除、导入导出按钮的  -->
        <div class="pageTitleWrap" v-if="!showTaskData">
          <div class="pageTitle">任务列表</div>
          <el-button type="primary" @click="openhandle">新增任务</el-button>
        </div>
        <div class="pageTitleWrap" v-if="showTaskData">
          <div class="pageTitle"><span class="returnHandlec" @click="returnHandle"><i class="el-icon-back"></i></span>查看任务数据</div>
          <el-button type="primary" @click="dialogFormVisible = true" style="opacity: 0;"></el-button>
        </div>
        <!-- 任务列表 -->
        <el-table :data="tableData" border stripe: header-cell-class-name="headerBg" v-if="!showTaskData">
          <el-table-column prop="name" label="任务名称" width="240" align="center"></el-table-column>
          <el-table-column prop="keyword" label="搜索关键词" width="240" align="center"></el-table-column>
          <el-table-column prop="citys" label="城市列表" width="240" align="center">
            <!-- <template slot-scope="scope">
              <span>{{getCityNameByCode(scope.row.citys)}}</span>
            </template> -->
          </el-table-column>
          <el-table-column prop="reportKeywords" label="举报关键词" width="240" align="center"></el-table-column>
          <el-table-column prop="statusEnum" label="状态" width="240" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.statusEnum==='WAIT'">待开始</span>
              <span v-if="scope.row.statusEnum==='RUNNING'">进行中</span>
              <span v-if="scope.row.statusEnum==='FINISHED'">已完成</span>
              <!-- <span v-else>待开始</span> -->
            </template>
          </el-table-column>
          <!-- 表格里面添加编辑和删除的按钮  -->
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button type="success" @click="ShowDetail(scope.row.id)">查看数据</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 查看任务数据 -->
        <el-table :data="tableData2" border stripe: header-cell-class-name="headerBg" v-if="showTaskData">
          <el-table-column prop="date" label="职位名称" width="240" align="center"></el-table-column>
          <el-table-column prop="url" label="职位链接" width="240" align="center"></el-table-column>
          <el-table-column prop="companyName" label="公司名称" width="240" align="center"></el-table-column>
          <el-table-column prop="reportAccount" label="举报账号" width="240" align="center"></el-table-column>
          <el-table-column prop="reportStatusEnum" label="状态" width="240" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.reportStatusEnum==='SUCCESS'">成功</span>
              <span v-if="scope.row.reportStatusEnum==='FAILURE'">失败</span>
            </template>
          </el-table-column>
          <!-- 表格里面添加编辑和删除的按钮  -->
          <el-table-column label="操作" align="center">
            <template v-slot="scope">
              <el-button type="success" @click="reReportHandle(scope.row)">重新举报</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--下边这个div盒子是添加进来可以分页的代码 -->
        <div style="padding: 10px 0" v-if="!showTaskData">
          <el-pagination :page-sizes="[5, 10, 15, 20]" :page-size="pageSize" :current-page="current" layout="total, sizes, prev, pager, next" :total="total" @size-change="pageSizeChange"  @current-change="handleCurrentChange"></el-pagination>
        </div>
      </el-main>
    </el-container>
    <!-- 新增任务 -->
    <el-dialog title="新增任务" :visible.sync="dialogFormVisible">
      <el-form :model="form" ref="formRef">
        <div class="tanTitle">当命中检测关键词& 发布公司名字符合(如有设置) & 发布人符合(如有设置),并且相关发布公司和信息不在公司白名单以及人员中。</div>
        <el-form-item label="名称:" :label-width="formLabelWidth">
          <el-input v-model="form.name" placeholder="请输入任务名称" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="关键词:" :label-width="formLabelWidth">
          <el-input v-model="form.keyword" placeholder="请输入关键词" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="城市列表:" :label-width="formLabelWidth">
          <el-select v-model="form.citys" multiple placeholder="请选择城市" style="width: 100%;">
            <el-option
              v-for="item in cityList"
              :key="item.cityCode"
              :label="item.city"
              :value="item.cityCode">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="检测关键词:" :label-width="formLabelWidth">
          <el-input v-model="form.checkKeyword" placeholder="请输入关键词进行举报，多个逗号隔开" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="检测公司名单:" :label-width="formLabelWidth">
          <el-input v-model="form.checkCompanys" placeholder="公司名单，多个逗号隔开" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="检测公司招聘人:" :label-width="formLabelWidth">
          <el-input v-model="form.checkCompanyUser" placeholder="招聘人名单，多个逗号隔开" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="举报账号数量:" :label-width="formLabelWidth">
          <el-input v-model="form.reportUserCnt" placeholder="请输入账号数量数字" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveBtn">保 存</el-button>
      </div>
    </el-dialog>
  </el-container>
</template>

<script>
import {
  taskListApi, //获取任务列表
  taskAddApi, //添加任务
  taskShowDetailApi, //查看数据
  taskGetCityListApi, //获取城市列表
  taskReReportApi //重新举报
} from "@/api/api";
import HeaderComponent from '@/components/header.vue'
import LeftComponent from '@/components/left.vue'

export default {
  name: 'userList',
  components: {
    'header-component': HeaderComponent,
    'left-component': LeftComponent
  },
  data() {
    return {
      showTaskData:false,//是否显示“查看任务数据列表”
      tableData: [],//任务数据
      tableData2:[],//查看任务数据--根据任务id
      headerBg: 'headerBg',
      dialogFormVisible: false,
      current: 1,//当前页
      pageSize: 10,//分页大小
      total:0,//总共多少
      cityList: [{
        value: '北京',
        label: '北京'
      }, {
        value: '上海',
        label: '上海'
      }, {
        value: '成都',
        label: '成都'
      }, {
        value: '重庆',
        label: '重庆'
      }, {
        value: '海南',
        label: '海南'
      }],
      form: {
        name: '',//任务名称
        keyword: '',//搜索关键词
        citys: '',//城市列表：多个中间用,隔开
        checkKeyword: '',//检测关键词：多个中间用,隔开
        checkCompanys: '',//检测公司名单：多个中间用,隔开
        checkCompanyUser: '',//检测公司招聘人：多个中间用,隔开
        reportUserCnt: '',//举报账号数量
      },
      formLabelWidth: '120px',
      chakantaskId:'' //点击查看的任务id
    }
  },
  mounted: function () {
    this.taskGetCityListFun() //获取城市列表
    this.taskListFun() //bossUser列表
  },
  methods: {

    // 通过城市code显示name
    getCityNameByCode(code){
      let codes = code.split(",");
      console.log('这是显示的code')
      console.log(codes)
      let names = []
      this.cityList.forEach(item=>{
        codes.forEach(item2=>{
          if(item.cityCode===item2){
            names.push(item.city)
          }
        })
        
      })
    },

    // 获取城市列表
    taskGetCityListFun() {
      taskGetCityListApi().then(res=>{
        console.log('获取城市列表数据')
        console.log(res)
        if(res.success){
          this.cityList = res.data
        }
      })
    },

    // 获取任务列表
    taskListFun() {
      let param = {
        current: this.current,//当前页
        pageSize: this.pageSize //分页大小
      }
      taskListApi(param).then(res => {
        console.log('获取任务列表')
        console.log(res)
        this.total = res.total
        this.tableData = res.data
      })
    },

    // pageSize 改变时会触发
    pageSizeChange(val){
      this.pageSize = val
      this.current = 1
      this.taskListFun()
    },
    // currentPage 改变时会触发
    handleCurrentChange(val){
      this.current = val
      this.taskListFun()
    },

    // 点击新增用户-弹出弹出
    openhandle(){
      //清空表单数据
      this.form={
        name: '',//任务名称
        keyword: '',//搜索关键词
        citys: '',//城市列表：多个中间用,隔开
        checkKeyword: '',//检测关键词：多个中间用,隔开
        checkCompanys: '',//检测公司名单：多个中间用,隔开
        checkCompanyUser: '',//检测公司招聘人：多个中间用,隔开
        reportUserCnt: '',//举报账号数量
      },
      this.dialogFormVisible = true
    },
     // 新增任务-点击保存
     saveBtn(){
      console.log('新增任务-点击保存')
      let params = {}
      params.need = true
      params.name = this.form.name
      params.keyword = this.form.keyword
      
      params.checkKeyword = this.form.checkKeyword
      params.checkCompanys = this.form.checkCompanys
      params.checkCompanyUser = this.form.checkCompanyUser
      params.reportUserCnt = this.form.reportUserCnt

      let names = []
      console.log(this.form)
      console.log(params)
      this.cityList.forEach(item=>{
        this.form.citys.forEach(item2=>{
          if(item.cityCode===item2){
            names.push(item.city,item.cityCode)
          }
        })
      })
      console.log(names)
      params.citys = names.join(',')
      if(params.name.trim()===''||params.keyword.trim()===''||params.citys.trim()===''||params.checkKeyword.trim()===''||params.reportUserCnt.trim()===''){
        this.$message({
          message: '请将信息填写完整！',
          type: 'warning'
        });
        return
      }
      taskAddApi(params).then(res=>{
        console.log('新增任务-保存结果---')
        console.log(res)
        if(res.success){
            this.$message({
              message: '添加成功',
              type: 'success'
            });
            this.dialogFormVisible = false
            this.taskListFun(); //获取bossUser列表
        }else{
          this.$message.error(res.errorMessage);
        }
      })
    },
    // 点击每一行的查看数据
    ShowDetail(id){
      console.log('点击每一行的查看数据')
      console.log(id)
      this.chakantaskId = id
      this.taskShowDetailFun()
    },
    taskShowDetailFun(){
      let param = {
        need:true,
        taskId:this.chakantaskId
      }
      taskShowDetailApi(param).then(res=>{
        console.log('点击每一行的查看数据--请求结果')
        console.log(res)
        this.showTaskData = true
        // this.total = res.total
        this.tableData2 = res.data
      })
    },
    // 重新举报
    reReportHandle(info){
      console.log('重新举报')
      console.log(info)
      let param = {
        need:true,
        reportAccount:info.reportAccount,
        url:info.url
      }
      taskReReportApi(param).then(res=>{
        console.log('重新举报---结果')
        console.log(res)
        if(res.success){
          this.$message({
            message: '举报成功',
            type: 'success'
          });
          this.taskShowDetailFun()
        }
      })
    },
    // 返回任务列表页
    returnHandle(){
      this.showTaskData = false
      this.current = 1
      this.pageSize = 10
      this.taskListFun()
    }
  }
}
</script>

<!--顶部的横栏颜色定义-->
<style>
.headerBg {
  background: #ccc !important;
}

.el-menu-item-group__title {
  padding: 0 0 0 0;
}
</style>